<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="<?php echo BAOGG_AJAX;?>ext-2.2.1/resources/css/ext-all.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="<?php echo BAOGG_AJAX;?>ext-2.2.1/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="<?php echo BAOGG_AJAX;?>ext-2.2.1/ext-all.js">
        </script>
		 <script type="text/javascript" src="<?php echo BAOGG_AJAX;?>ext-2.2.1/examples/form/states.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){
				
				index=0;
				 Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
                    onRender: function(ct, position){
                        this.el = ct.createChild({
                            tag: 'iframe',
							region:'center',
                            id: 'iframe-' + this.id,
                            frameBorder: 0,
                            src: this.url
                        });
                    }
                });
				
                // create the Data Store 
                var store = new Ext.data.JsonStore({
                    root: 'topics',
                    totalProperty: 'totalCount',
                    idProperty: 'threadid',
                    remoteSort: true,
                    fields: ['title', 'forumtitle', 'forumid', 'author', {
                        name: 'replycount',
                        type: 'int'
                    }, {
                        name: 'lastpost',
                        mapping: 'lastpost',
                        type: 'date',
                        dateFormat: 'timestamp'
                    }, 'lastposter', 'excerpt'],
                    
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.ScriptTagProxy({
                        url: 'http://extjs.com/forum/topics-browse-remote.php'
                    })
                });
                store.setDefaultSort('lastpost', 'desc');
                store.load({
                    params: {
                        start: 0,
                        limit: 25
                    }
                });
                
                // pluggable renders
                function renderTopic(value, p, record){
                    return String.format('<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid);
                }
                function renderLast(value, p, r){
                    return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
                }
                
                var pagingBar = new Ext.PagingToolbar({
                    pageSize: 25,
                    store: store,
                    displayInfo: true,
                    displayMsg: 'Displaying topics {0} - {1} of {2}',
                    emptyMsg: "No topics to display",
                    
                    items: ['-', {
                        pressed: true,
                        enableToggle: true,
                        text: 'Show Preview',
                        cls: 'x-btn-text-icon details',
                        toggleHandler: function(btn, pressed){
                            var view = grid.getView();
                            view.showPreview = pressed;
                            view.refresh();
                        }
                    }]
                });
                
                var grid = new Ext.grid.GridPanel({
                    region: 'center',
                    // title: 'ExtJS.com - Browse Forums',
                    store: store,
                    trackMouseOver: false,
                    disableSelection: true,
                    loadMask: true,
                    tbar: [{ // <-- Add the action directly to a toolbar
                        text: 'Action Menu',
                        handler: function(){
                             var win = new Ext.Window({
							 	id:'gridDialog',
					            title: 'Layout Window',
						          closable:true,
						          width:600,
						          height:350,
						            //border:false,
						            plain:true,
						           layout: 'fit',						
						            items: [new Ext.ux.IFrameComponent({ id:'test'+(++index), url: '<?php echo BAOGG_BASE_URL."admin/form";?>' })]
						        });
						
						        win.show();
                        } // <-- Add the action directly to a menu
                    }, '-', 
					new Ext.form.ComboBox({
                        store: new Ext.data.SimpleStore({
                            fields: ['abbr', 'state'],
                            data: Ext.exampledata.states // from states.js
                        }),
                        displayField: 'state',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText: 'Select a state...',
                        selectOnFocus: true,
                        width: 135
                    })],
                    // grid columns
                    columns: [{
                        id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                        header: "Topic",
                        dataIndex: 'title',
                        width: 420,
                        renderer: renderTopic,
                        sortable: true
                    }, {
                        header: "Author",
                        dataIndex: 'author',
                        width: 100,
                        hidden: true,
                        sortable: true
                    }, {
                        header: "Replies",
                        dataIndex: 'replycount',
                        width: 70,
                        align: 'right',
                        sortable: true
                    }, {
                        id: 'last',
                        header: "Last Post",
                        dataIndex: 'lastpost',
                        width: 150,
                        renderer: renderLast,
                        sortable: true
                    }],
                    
                    // customize view config
                    viewConfig: {
                        forceFit: true,
                        enableRowBody: true,
                        showPreview: true,
                        getRowClass: function(record, rowIndex, p, store){
                            if (this.showPreview) {
                                p.body = '<p>' + record.data.excerpt + '</p>';
                                return 'x-grid3-row-expanded';
                            }
                            return 'x-grid3-row-collapsed';
                        }
                    },
                    
                    // paging bar on the bottom
                    bbar: pagingBar
                });
                // trigger the data store load ??
                
                
                
                // render it
                // grid.render();
                var viewpoint = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
                    items: [grid]
                });
                
                
            });
        </script>
    </head>
    <body>
        <div id='topic-region'>
        </div>
    </body>
</html>
